<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
          border: 20px black solid ;
          width: 200px;
          height: 200px;
          margin: 10px auto;
          background-color: black;
        }
        .box1{
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">鼠标移入改变样式，鼠标移出恢复</div>
    </div>
</body>
</html>
<script>
    // window.onload 当页面渲染完成时出发的函数
    window.onload = function(){
        var o = document.querySelector(".box")
        var p = document.querySelector(".box1")
        o.onmouseover=function () {
            this.style.cssText = "border-color:red; background:white;"
            p.style.cssText = "color:red"
        }
        o.onmouseout= function (){
            this.style.cssText = "border-color:black; background:black"
            p.style.cssText = "color:white"
        }
    }
</script>